<script>
import { reactive,toRefs } from '@vue/reactivity'
import {ref } from 'vue'
import { useRouter} from 'vue-router'
import { useStore } from '../store'
import { Dialog } from 'vant';
    export default {
         components: {
            [Dialog.Component.name]: Dialog.Component,
        },
        setup() {
            let router=useRouter()
            let dataFun=reactive({
                addressList:null,
                addressid:null,
            })
            let store=useStore()
            dataFun.addressList=store.address
            let go=()=>{
                router.go(-1)
            }

            let show =ref(false);
            const showPopup = (addressid) => {//弹出层
                show.value = true;
                dataFun.addressid=addressid
            };

            // 添加新地址
            let nextaddress=()=>{
                router.push({
                    path:"/AddAddress",
                    query:{
                        add:0
                    }
                })
            }

            // 修改地址
            let modify=(addressid)=>{
                let index= store.address.findIndex(item=>{
                    return item.addressid==addressid
                })
                console.log(addressid);

                // let {user, phone,province,city,area,Detailedaddress,defaulter,check}=store.address[index]
                console.log(store.address[index].defaulter);
                router.push({
                    path:"/AddAddress",
                    query:{
                        add:1,
                        user:store.address[index].user,
                        phone:store.address[index].phone,
                        province:store.address[index].province,
                        city:store.address[index].city,
                        area:store.address[index].area,
                        Detailedaddress:store.address[index].Detailedaddress,
                        defaulter:store.address[index].defaulter,
                        check:store.address[index].check,
                        addressid:store.address[index].addressid,
                    }
                })

            }

            // 取消弹出层
            let cancel=()=>{
                show.value = false;
            }
            // 删除地址
            let del=()=>{
                
                let index= store.address.findIndex(item=>{
                    return item.addressid==dataFun.addressid
                })
                if(store.address[index].check==true){
                    console.log(store.address[index].check);
                    store.address.forEach(item=>{
                        item.check=false
                    })
                    store.address.splice(index,1)
                    store.address[0].check=true
                    dataFun.addressList=store.address
                }else{
                    store.address.splice(index,1)
                    dataFun.addressList=store.address
                }
                show.value = false;
            }

            // 单选（选择一个地址）
            let onechose=(addressid)=>{
                store.address.forEach(item=>{
                    item.check=false
                })
                let index=store.address.findIndex(item=>{
                    return item.addressid==addressid
                })

                store.address[index].check=true
                go()
            }


            return {
                ...toRefs(dataFun),
                go,
                nextaddress,
                modify,
                onechose,
                del,
                show,
                showPopup,
                cancel
            }
        },
    }
</script>

<template>
    <div class="ShipAddress">

        <div class="wrapper">
            <div class="header">
                <div class="header_left">
                    <div class="icon_coo icon-a-ziyuan558" @click="go"></div>
                    <div class="head_name">选择收货地址</div>
                </div>
            </div>
            <div class="location">
                <ul>
                    <li v-for="(item,index) in addressList" :key="index"  @click="onechose(item.addressid)">
                        <div :class="['location_right','icon_coo',item.check?'icon-xuanzhong':'']"></div>
                        <div class="location_left">
                            <div class="location_left_top">
                                <div class="name">{{item.user}}</div>
                                <div class="tel">{{item.phone}}</div>
                            </div>
                            <div class="location_left_bottom">
                                <div class="ground"><span class="mo" v-show="item.defaulter">[默认]</span>{{item.province}}{{item.city}}{{item.area}}{{item.Detailedaddress}}</div>
                            </div>
                        </div>
                        <div class="location_center">
                            <div class=" icon_coo icon-xiugai" @click.stop="modify(item.addressid)"></div>
                            <div class="iconfont icon-shanchu" @click.stop="showPopup(item.addressid)"></div>
                        </div>
                    </li>
                </ul>
            </div>
                <div class="pop">
                    <van-popup v-model:show="show" >
                        <p>确定删除？</p>
                        <div class="btn">
                            <div class="nobtn" @click="cancel">取消</div>
                            <div class="yesbtn" @click.stop="del">确定</div>
                        </div>
                    </van-popup>
                </div>
           


            <!-- 底部添加按钮 -->
            <div class="btntab">
                <p @click="nextaddress">添加新地址</p>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.ShipAddress{
    .wrapper{
        .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 5;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(248, 235, 207);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header_left{
                font-size: 18px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                // .icon-a-ziyuan558{}
                .head_name{
                    font-weight: 600;
                    font-size: 18px;
                    padding-left: 30px;
                }
            }
        }
        .location{
            padding: 52px 0 70px;
            ul{
                li{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 14px 16px;
                    border-bottom: 1px solid #ddd;
                    height: 45px;
                    .location_left{
                        flex: 1;
                        .location_left_top{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            font-size: 14px;
                            padding-bottom: 12px;
                            // .name{}
                            // .tel{}
                        }
                        .location_left_bottom{
                            display: flex;
                            align-items: center;
                            .mo{
                                font-size: 12px;
                                color: #feca3e;
                            }
                            .ground{
                                font-size: 13px;
                            }
                        }
                    }
                    .location_right{
                        margin-right: 20px;
                        width: 16px;
                        height: 16px;
                        border: 1px solid #999;
                        border-radius: 50%;
                    }
                    .location_center{
                        margin-left: 20px;
                        color: #999;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                        height: 100%;
                    }
                    .location_right.icon-xuanzhong{
                        color: #feca3e;
                        font-size: 18px;
                        text-align: center;
                        line-height: 16px;
                        border: 1px solid #feca3e;
                    }
                }
            }
        }
        .pop{
            
            p{
                width: 200px;
                padding: 20px;
                text-align: center;
            }
            .btn{
                padding: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .nobtn{
                    color: #999;
                }
                .yesbtn{
                    color: #f3410b;
                }
            }
        }
        // .van-popup{
        //     width: 200px;
        //     border-radius: 8px;
        // }
        .btntab{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px 0;
            background-color: #fff;
            p{
                width: 300px;
                margin: 0 auto;
                background-color: #feca3e;
                text-align: center;
                height: 50px;
                line-height: 50px;
                border-radius: 25px;
            }
        }
    }
}
</style>